<template>
    <el-container>
        <div class="header">
            <div class="left">
                <div style="display: flex;align-items: center">
                    时间范围:
                    <el-date-picker @change="dateChange" style="width: 220px;margin-left: 10px; " v-model="dateValue"
                        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>

                    <div style="margin-left: 30px;">
                        政策类型:
                        <el-input v-model="params.policyType" placeholder="请输入" style="margin-left: 10px; width: 150px"
                            clearable></el-input>
                    </div>
                </div>
            </div>
            <div class="center">
                <el-button type="primary" @click="$refs.table.upData()">查询</el-button>
                <el-button type="" @click="clickEmpty">清空</el-button>
            </div>
            <div class="right">
                <el-button type="primary" @click="handelCreatPolicy">发布新政策</el-button>
            </div>
        </div>

        <el-header style="display: none"></el-header>

        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" border :params="params" stripe remoteSort remoteFilter
                @selection-change="selectionChange">
                <!-- <el-table-column label="发布时间" prop="releaseTime" width="180" align="center"></el-table-column> -->
                <el-table-column label="发布时间" align="center">
                    <template #default="scope">
                        {{ changeDate(scope.row.releaseTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="政策类型" prop="policyType" align="center"></el-table-column>
                <el-table-column label="政策标题" prop="policyTitle" align="center"></el-table-column>
                <el-table-column label="发布单位" prop="releaseUnit" align="center"></el-table-column>
                <!-- <el-table-column label="政策详情" prop="policyInterpretation" align="center"></el-table-column> -->
                <el-table-column label="政策详情" align="center">
                    <template #default="scope">
                        <el-button text type="primary" size="small" @click="clickDetail(scope.row)">政策详情</el-button>
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" align="center">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="del(scope.row.id)">删除 </el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>

        </el-main>

        <el-drawer v-model="dialogPolicy" title="发布新政策" width="500">
            <div style="padding: 20px;">
                <el-form :model="policyForm" label-width="auto" style="max-width: 500px">
                    <el-form-item label="政策类型:">
                        <el-input v-model="policyForm.policyType" />
                    </el-form-item>
                    <el-form-item label="政策标题:">
                        <el-input v-model="policyForm.policyTitle" />
                    </el-form-item>
                    <el-form-item label="发布单位:">
                        <el-input v-model="policyForm.releaseUnit" />
                    </el-form-item>
                    <el-form-item label="政策正文:">
                        <el-input :autosize="{ minRows: 15 }" placeholder="请输入内容" v-model="policyForm.policyText"
                            type="textarea" />
                    </el-form-item>

                    <el-form-item label="政策解读:">
                        <el-input :autosize="{ minRows: 15 }" placeholder="请输入内容"
                            v-model="policyForm.policyInterpretation" type="textarea" />
                    </el-form-item>
                </el-form>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogPolicy = false">取消</el-button>
                    <el-button type="primary" @click="createPolicy">
                        确定
                    </el-button>
                </div>
            </template>
        </el-drawer>

        <el-drawer v-model="dialogPolicy2" title="政策详情" width="500">
            <div style="padding: 20px;">
                <el-form :model="policyForm2" label-width="auto" style="max-width: 500px">
                    <el-form-item label="政策正文:">
                        <el-input readonly :autosize="{ minRows: 5 }" placeholder="请输入内容"
                            v-model="policyForm2.policyText" type="textarea" />
                    </el-form-item>

                    <el-form-item label="政策解读:">
                        <el-input readonly :autosize="{ minRows: 5 }" placeholder="请输入内容"
                            v-model="policyForm2.policyInterpretation" type="textarea" />
                    </el-form-item>
                </el-form>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="dialogPolicy = false">取消</el-button> -->
                    <el-button type="primary" @click="dialogPolicy2 = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-drawer>

    </el-container>
</template>

<script>
export default {
    data() {
        return {
            apiObj: this.$API.releasePolicy.getPolicyList,
            dialogPolicy: false,
            dialogPolicy2: false,
            policyForm: {
                policyType: '',
                policyText: '',
                policyInterpretation: '',
                policyTitle: '',
                releaseUnit: '',
            },
            policyForm2: {
                policyText: '',
                policyInterpretation: '',
            },
            params: {
                startTime: '',
                endTime: '',
                policyType: ''
            },
            dateValue: '',

        }
    },
    created() {
        // this.dataChange()
    },
    methods: {
        clickEmpty() {
            this.dateValue = ''
            this.params.startTime = null
            this.params.endTime = null
            this.params.policyType=''
            this.$refs.table.upData()
        },
        clickDetail(e) {
            this.dialogPolicy2 = true
            this.policyForm2.policyText = e.policyText
            this.policyForm2.policyInterpretation = e.policyInterpretation

        },
        handelCreatPolicy() {
            this.dialogPolicy = true
            this.policyForm.policyType = ''
            this.policyForm.policyText = ''
            this.policyForm.policyInterpretation = ''
            this.policyForm.policyTitle = ''
            this.policyForm.releaseUnit = ''
        },
        createPolicy() {
            this.$API.releasePolicy.createPolicy.post({ data: { ...this.policyForm } }).then((res) => {
                // this.meetingList = res.data
                this.$refs.table.upData()
                this.$message.success('发布成功')
                this.dialogPolicy = false

            })
        },
        dateChange(e) {
            if (!e) {
                this.params.startTime = null
                this.params.endTime = null
                // this.$refs.table.upData()
                return
            }
            e.forEach((item, index) => {
                const date = new Date(item);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
                const day = String(date.getDate()).padStart(2, '0'); // 日期补零
                const formattedDate = `${year}-${month}-${day}`;
                if (index == 0) {
                    this.params.startTime = formattedDate
                } else {
                    this.params.endTime = formattedDate
                }
            })
            // this.$refs.table.upData()
        },
        changeDate(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
            const day = String(date.getDate()).padStart(2, '0'); // 日期补零
            const hours = String(date.getHours()).padStart(2, '0'); // 小时补零
            const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟补零
            const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒数补零
            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return formattedDate
        },
        async del(id) {
            let res = await this.$API.releasePolicy.delPolicy.post({ data: [{ id }] })
            if (res.data) {
                this.$message.success('删除成功')
            }
            this.$refs.table.upData()
        },

    }
}


</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        width: 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
    }

    .center {
        width: 30%;
    }

    .right {
        width: 20%;
        display: flex;
        justify-content: right;
        padding-right: 20px;

    }
}
</style>